<template>
  <!--  修改数据  -->
  <el-dialog v-model="editElementStore.visible" :title="getTitle" @close="closeEditDialog" width="300px">
    <div>
      <table class="tb">
        <tbody>
          <tr v-if="dialogType === DialogType.AddData">
          <td class="td-name">类型</td>
          <td class="td-data">
            <el-select v-model="addType" class="rightInput">
              <el-option :value="MapType.Marker" label="点"></el-option>
              <el-option :value="MapType.Polyline" label="线"></el-option>
              <el-option :value="MapType.Polygon" label="面"></el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td class="td-name">名称</td>
          <td class="td-data">
            <el-input v-model="element.featureData.name"></el-input>
          </td>
        </tr>
        <tr>
          <td class="td-name">时间</td>
          <td class="td-data">
            <el-input v-model="element.featureData.createTime" :disabled="true"></el-input>
          </td>
        </tr>
        <tr>
          <td class="td-name">置顶数据</td>
          <td class="td-data">
            <el-switch v-model="element.featureData.top"/>
          </td>
        </tr>
        <tr>
          <td class="td-name">坐标系统</td>
          <td class="td-data">
            <el-select v-model="element.featureData.coordsys" class="rightInput">
              <el-option v-for="coordys in MapCoordSys" :value="coordys" :label="coordys"></el-option>
            </el-select>
          </td>
        </tr>
        </tbody>
      </table>
      <EditMarker v-if="addType === MapType.Marker"/>
      <EditPolygon v-else-if="addType === MapType.Polygon"/>
      <EditPolyline v-else-if="addType === MapType.Polyline"/>
    </div>
    <div slot="footer" class="dialog-footer">
      <div v-if="dialogType === DialogType.EditData">
        <el-button type="danger" @click="deleteAndCloseEditDialog">删除数据</el-button>
        <el-button @click="closeEditDialog">取 消</el-button>
        <el-button type="primary" @click="saveEditDialog">确 定</el-button>
      </div>
      <div v-else>
        <el-button @click="closeEditDialog">取 消</el-button>
        <el-button type="primary" @click="saveEditDialog">上 传</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup name="EditDialog" lang="ts">
import { ref, watch, computed } from 'vue';
import { useEditElementStore } from '@/stores/map/mapInEditor'; // 假设 Pinia store 路径
import EditPolygon from "@/views/map/dialog/MapEditElement/EditPolygon.vue";
import EditMarker from "@/views/map/dialog/MapEditElement/EditMarker.vue";
import EditPolyline from "@/views/map/dialog/MapEditElement/EditPolyline.vue";
import { requestIsSuccess } from "@/api/request";
import { MapData } from "@/class/map/MapData";
import { Marker, MarkerData } from "@/class/map/Marker";
import { getRandomColor } from "@/utils/utils";
import { Polyline, PolylineData } from "@/class/map/Polyline";
import { Polygon, PolygonData } from "@/class/map/Polygon";
import { defineEmits } from 'vue';
import { DialogType, MapCoordSys, MapType } from '@/class/map/myMapOpt';
import { storeToRefs } from 'pinia';
const emits = defineEmits(['close', 'cancel', 'save']);
const editElementStore = useEditElementStore();

let { element, visible, dialogType, addType } = storeToRefs(editElementStore);

watch(addType, (newVal) => {
  if (dialogType.value === DialogType.AddData) {
    let elementData = undefined;
    const mapData = new MapData({
      type: newVal,
      name: newVal + Date.now(),
      top: false,
      coordsys: MapCoordSys.CJ02,
    });
    switch (newVal) {
      case MapType.Marker:
        const marker = new Marker({
          position: [116.397484, 39.90912]
        });
        elementData = new MarkerData({ featureData:mapData, featureMap:marker });
        break;
      case MapType.Polyline:
        const polyline = new Polyline({
          path: [
            [116.392128, 39.922459], [116.39259, 39.913531], [116.396262, 39.913663],
            [116.396287, 39.913115], [116.392073, 39.912907], [116.392048, 39.912302],
            [116.391654, 39.912359], [116.391927, 39.907803], [116.403189, 39.907992],
            [116.402573, 39.913266], [116.398482, 39.913209], [116.39831, 39.913739],
            [116.401858, 39.913776], [116.401464, 39.922848]
          ],
          strokeColor: getRandomColor()
        });
        elementData = new PolylineData({ featureData:mapData, featureMap:polyline });
        break;
      case MapType.Polygon:
        const polygon = new Polygon({
          path: [
            [116.392128, 39.922459], [116.39259, 39.913531], [116.396262, 39.913663],
            [116.396287, 39.913115], [116.392073, 39.912907], [116.392048, 39.912302],
            [116.391654, 39.912359], [116.391927, 39.907803], [116.403189, 39.907992],
            [116.402573, 39.913266], [116.398482, 39.913209], [116.39831, 39.913739],
            [116.401858, 39.913776], [116.401464, 39.922848]
          ],
          strokeColor: getRandomColor(),
          fillColor: getRandomColor(),
          fillOpacity: 0.5,
        });
        elementData = new PolygonData({ featureData:mapData, featureMap:polygon });
        break;
    }
    editElementStore.setElement(elementData);
  }
}, { immediate: true });

const getTitle = computed(() => {
  switch (dialogType.value) {
    case DialogType.EditData:
      return "编辑数据";
    case DialogType.AddData:
      return "新增数据";
  }
});

const saveEditDialog = async () => {
  let result = await editElementStore.saveEditDialog();
  if (result) {
    emits('save');
    await editElementStore.closeEdit();
  }
};

const deleteAndCloseEditDialog = () => {
  editElementStore.deleteEditDialog();
  emits('save');
  editElementStore.closeEdit();
};
const closeEditDialog=()=>{
  editElementStore.visible = false
}
</script>

<style scoped>

</style>    